<template>
  <view class="patient">
    <view class="user-info">
      <view class="role" v-if="roleName&&roleIds.indexOf(',')>-1" @click="$util.goUrl('/pages/selectRole/index')"
        >{{ roleName }}<text class="iconfont icon-right"
      /></view>
      <view class="avatar" @click="$emit('showActionSheet', data.avatar)" v-if="data.name">
        <image v-if="data.avatar" :src="data.avatar" />
        <image v-else-if="data.sex < 0 || data.sex == 1" src="@/static/image/man.png" />
        <image v-else src="@/static/image/woman.png" />
      </view>
      <text
        v-if="data.sex > -1"
        :class="['iconfont', data.sex ? 'icon-nan' : 'icon-nv', 'gender']"
        :style="{ background: data.sex ? '#1DA1F3' : '#F86098' }"
      />
      <view class="msg" v-if="data.name">
        <view class="msg-item">
          <text class="name">{{ data.name }}</text
          >{{ data.age || "0" }}岁</view
        >
        <view class="msg-item" v-if="data.diseaseCategory">
          <text>{{ data.diseaseCategory }}</text
          >{{ data.sickTime }}</view
        >
      </view>
    </view>
    <view class="tabs">
      <view class="item" v-for="(item, index) in tabs" :key="index" @click="$util.goUrl(item.url)">
        <text :class="['iconfont', item.icon]" :style="{ color: item.color }" />
        <view> {{ item.label }} </view>
      </view>
      <text v-if="data.notReadDoctorMsgNum" class="dot no-read">{{ data.notReadDoctorMsgNum }}</text>
      <text v-if="data.notTestDayNum" class="dot no-test">{{ data.notTestDayNum }}</text>
    </view>
    <view style="background: #fff">
      <basics-list ref="basicsList" @listClick="listClick" />
    </view>
  </view>
</template>

<script>
import basicsList from "@/components/basics-list/basics-list.vue";

export default {
  components: { basicsList },
  props: {
    roleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
	  roleIds:uni.getStorageSync("roleIds"),
      data: {},
      tabs: [
        { icon: "icon-shujukanban", color: "#FFAFCC", label: "测量数据", url: "/pagesPatient/metricalData/index" },
        { icon: "icon-gerendangan", color: "#9BEE8B", label: "我的档案", url: "/pagesPatient/record/index" },
        { icon: "icon-xiaoxi", color: "#B8B0FB", label: "医生提醒", url: "/pagesPatient/tips/index" },
      ],
      urls: [
        "/pagesPatient/equipmentList/index",
        "/pagesPatient/myDoctor/index",
        "/pagesPatient/family/index",
        "/pagesPatient/message/index",
      ],
    };
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  created() {
    this.$nextTick(() => {
      this.initBasicsList();
    });
  },
  methods: {
    //初始化
    init() {
      this.$util.requestLodingType = false;

      this.$api.patientGetHomeInfo().then((res) => {
        if (res.code == 200) {
			if(!res.data.name){
			  uni.showModal({
				title: '提示',
				content: '请先完成患者信息设置',
				confirmText:'前往设置',
				showCancel:false,
				success:  (res)=> {
					if (res.confirm) {
						this.$util.goUrl(this.tabs[1].url)
					} 
				}
			  });
			}
          this.data = res.data;
          this.initBasicsList();
          uni.setStorageSync("patientId", res.data.patientId);
        }
      });
    },
    //初始化列表
    initBasicsList() {
      let list = [
        { title: "我的设备", icon: "guanlianshebei", rightArrow: true },
        { title: "我的医生", icon: "yisheng", rightArrow: true },
        { title: "我的亲友", icon: "a-24-30_fuzhi-04", rightArrow: true },
        {
          title: "系统消息",
          icon: "tuisongxiaoxi",
          placeholder: this.data && this.data.notReadSysMsgNum ? this.data.notReadSysMsgNum + "条未读" : "",
          rightArrow: true,
        },
      ];
      this.$refs.basicsList.initList(list);
    },
    listClick(index) {
      this.$util.goUrl(this.urls[index]);
    },
    setAvatar(avatar) {
      this.data.avatar = avatar;
    },
  },
};
</script>
<style lang="scss" scoped>
.patient {
	height: calc(100vh - 4rpx);
  .user-info {
    background: $theme-color;
    display: flex;
    padding: 0 40rpx 40rpx 40rpx;
    align-items: center;
    position: relative;
    min-height: 218rpx;
    .role {
      position: absolute;
      right: 20rpx;
      bottom: 10rpx;
      z-index: 1000;
      font-size: $small-font-size;
      color: #fff;
    }
    .avatar {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-radius: 140rpx;
      overflow: hidden;
      margin-top: 6rpx;
      box-shadow: rgba(14, 14, 14, 0.5) 0px 6rpx 15rpx 0px;
      border: 1rpx solid rgba(255, 255, 255, 0.7);
      padding: 4rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .gender {
      z-index: 100;
      font-size: 30rpx;
      margin: 100rpx 0 0 -60rpx;
      z-index: 100;
      background: blue;
      color: #fff;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      width: 40rpx;
      border-radius: 40rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.8);
    }
    .msg {
      color: #fff;
      width: calc(100% - 200rpx);
      margin-left: 40rpx;
      line-height: 40rpx;
      padding-top: 10rpx;
      &-item {
        margin-bottom: 10rpx;
        text:first-child {
          margin-right: 40rpx;
        }
        .name {
          font-weight: bold;
          font-size: $big-font-size;
        }
      }
    }
  }
  .tabs {
    display: flex;
    padding: 20rpx 0;
    margin: 20rpx 0;
    background: #fff;
    position: relative;

    .item {
      width: 33.33vw;
      text-align: center;
      .iconfont {
        font-weight: bold;
        font-size: 80rpx;
      }
    }
    .dot {
      position: absolute;
      min-width: 40rpx;
      box-sizing: border-box;
      padding: 0 4rpx;
      height: 40rpx;
      color: #fff;
      background: #e83112;
      border-radius: 40rpx;
      font-size: 20rpx;
      top: 10rpx;
      z-index: 100;
      text-align: center;
      line-height: 40rpx;
    }
    .no-read {
      right: 66rpx;
    }
    .no-test {
      left: 136rpx;
    }
  }
}
</style>
